<template>
  <el-dialog :title="titleName" :visible.sync="dialogVisible" custom-class="custom_dialog" :close-on-click-modal="false"
             :modal-append-to-body="false" width="40%" :before-close="onClose">

    <div class="resJson">
      <el-button type="primary" plain v-clipboard:copy="data" v-clipboard:success="onCopy">复制内容</el-button>
      <pre>{{resJson}}</pre>
    </div>

  </el-dialog>
</template>

<script>
  export default {
    name: "res-json",
    data() {
      return {
        titleName: '请求返回内容',
        dialogVisible: false,
        resJson: '',
        data: '',
      }
    },
    methods: {
      // 打开界面
      open(json) {
        this.resJson = JSON.parse(json)
        this.data = json
        this.dialogVisible = true
      },
      // 关闭
      onClose() {
        this.resJson = ''
        this.dialogVisible = false
        this.$emit('closeDialog', false)
      },
      // 复制内容
      onCopy(e) {
        this.$message({message: '复制成功', type: 'success'})
      }
    }
  }
</script>

<style scoped>
  .resJson {
    height: 400px;
    overflow: auto;
  }
</style>
